import React from 'react'
import F from 'lodash/fp'
import {connect} from 'react-redux'
import {contentChange, selectElm, replaceImgOpen, markEditable, deleteElm, $cropperModal, unMarkEditable, cssChange} from '../actions/content-change'
import {analysisSvg} from '../utils.js'

const isImgElm = elm => /<img|<xtb-svg/.test(elm.content)

const parseSrc = content => content.match(/<img\s+.*?src="(.*?)"/)[1]

const ImgElm = ({content, onClick, selected, replaceImg, classes}) => {
    return (
        <div className={"layer-item " + classes.join(' ')} >
            <div className={selected ? "layer-item-c layer-item-select" : "layer-item-c"} onClick={onClick}>
                {/<xtb-svg/.test(content) ? <div dangerouslySetInnerHTML={{__html: content}}/> : <img src={parseSrc(content)} />}
            </div>
            <button
                className="layer-change"
                onClick={replaceImg}
            >
                替换
            </button>
        </div>
    )
}

const TxtElm = props => <textarea className="layer-edit-word"
        value={props.content} 
        onChange={({target}) => props.onChange(target.value)}
        onFocus={props.selectElm}
    />

class BottomPanel extends React.Component {
    componentDidMount () {
        $('#layer-wp-tab').tabs({noSwipe: 1})
    }

    mark(path) {
        if (path && path.length > 0) {
            this.props.markEditable(path)
            layer.alert('标记成功！')
        } else {
            layer.alert('请选择要标记的元素！')
        }
    }

    deleteElm(path) {
        if (path && path.length > 0) {
            this.props.deleteElm(path)
        } else {
            layer.alert('请选择要删除的元素！')
        }
    }

    unMark(path) {
        if (path && path.length > 0) {
            this.props.unMark(path)
            layer.alert('取消标记成功！')
        } else {
            layer.alert('请选择要取消标记的元素！')
        }
    }

    render () {
        const {activeIndex, elements, markEditable, mode, selectedPath, circle} = this.props

        let [imgs, txts] = F.partition(isImgElm, elements.map((t, i) => ({content: t.content, index: i, selected: t.selected, classes: t.classes})))

        if (mode === 'card') imgs = imgs.filter(t => t.classes.includes('user-editable'))
        return (
            <div className="am-tabs" id="layer-wp-tab">
                <ul className="am-tabs-nav am-nav am-nav-tabs layer-nav-tabs">
                    <li className="am-active"><a href="javascript: void(0)"><i className="fa fa-file-image-o layer-t-pic"></i>图片</a></li>
                    {mode === 'card' ?<li className="layer-mark kf"><button onClick={() => window.qimoChatClick()}>在线客服</button></li> : null}
                    {mode === 'template' ?<li><a href="javascript: void(0)"><i className="fa fa-text-height layer-t-word"></i>文字</a></li> : null}
                    {mode === 'template' ?<li className="layer-mark"><button className="edit-quit" onClick={ () => this.deleteElm(selectedPath)}>删除</button></li> : null}
                    {mode === 'template' ?<li className="layer-mark"><button onClick={this.unMark.bind(this, selectedPath)}>取消标记</button></li> : null}
                    {mode === 'template' ?<li className="layer-mark"><button onClick={this.mark.bind(this, selectedPath)}>标记</button></li> : null}
                    <li className="layer-mark"><button className="yellow" onClick={() => circle(selectedPath)}>圆圈</button></li>
                </ul>
                <div className="am-tabs-bd layer-tabs-bd">
                    <div className="am-tab-panel layer-tab-panel img-tab am-active am-in">
                        {imgs.map(t => <ImgElm
                            key={t.index}
                            selected={selectedPath.includes(`${activeIndex}.${t.index}`)}
                            content={t.content}
                            replaceImg={() => this.props.replaceImgOpen([activeIndex, t.index], elements)}
                            onClick={ev => this.props.selectElm([activeIndex, t.index], ev.ctrlKey)}
                            classes={t.classes}
                        />)}
                    </div>
                    {mode === 'template' ? <div 
                        className="am-tab-panel layer-tab-panel text-tab">
                        {txts.map(t => 
                            <TxtElm
                                key={t.index}
                                content={t.content}
                                onChange={(content) => this.props.onInput(content, [activeIndex, t.index])}
                                selectElm={() => this.props.selectElm([activeIndex, t.index])} 
                            />
                        )}
                    </div> : null}
                </div>
            </div>
        )
    }
}



module.exports = connect(
    ({card: state, mode}) => ({
        elements: state.pages[state.activeIndex] ? state.pages[state.activeIndex].elements : [],
        activeIndex: state.activeIndex,
        selectedPath: state.selectedPath,
        mode
    })
    , (dispatch, props) => ({
        onInput: (content, path) => dispatch(contentChange(content, path, 'BottomPanel')),
        selectElm: F.compose(dispatch, selectElm),

        replaceImgOpen: (path) => {
            dispatch(selectElm(path, false, true))
            props.$gallery.modal({closeViaDimmer:false})
            dispatch($cropperModal(props.$cropper))
        },

        markEditable: F.compose(dispatch, markEditable),
        unMark: F.compose(dispatch, unMarkEditable),
        deleteElm: function(e) {
            layer.confirm('你确定要删除吗？', function(index){
                F.compose(dispatch, deleteElm)(e)
                layer.close(index)
            })
        },

        circle: path => {
            if (path && path.length > 0) {
                dispatch(cssChange(path, {borderRadius: '50%'}))
                layer.alert('标记成功！')
            } else {
                layer.alert('请选择要标记的元素！')
            }
        }
    })
)(BottomPanel)